<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

       class FileInput extends React.Component{
           constructor(props){
                super(props);
                this.handleSubmit = this.handleSubmit.bind(this);
           }
           
           handleSubmit(event){
                event.preventDefault();
                alert(
                    `Selected file - ${
                        this.fileInput.files[0].name
                    }`
                );
           }

           render(){
               return (
                   <form onSubmit={this.handleSubmit}>
                        <label>
                            Upload file:
                            <input type="file"
                                   ref={input => {
                                        this.FileInput = input;
                                   }}
                            />
                        </label>
                        <br />
                        <button type="submit">
                            Submit
                        </button>
                   </form>
                );
           }
       }
        ReactDOM.render(
            <FileInput />,
            document.getElementById('root') 
        )
    </script>
  </body>
</html>